<template>
  <div>

    <div  class="bg">
      <div style="margin-bottom: 20px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }" style="margin-left: 20px">主页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">主页</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row :gutter="10" style="margin-bottom: 30px">
        <el-col :span="6">
          <el-card style="color: #409EFF">
            <div ><i class="el-icon-user-solid"></i>用户总数:</div>
            <div style="padding: 10px 0;text-align: center;font-weight: bold">
            <el-tag>{{sum}}</el-tag>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #67C23A">
            <div><i class="el-icon-view"></i>用户总访问量:</div>
            <div style="padding: 10px 0;text-align: center;font-weight: bold">
              <el-tag type="success">{{scholar}}</el-tag>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
        <el-card>
          <div style="color: #F56C6C"><i class="el-icon-user-solid"></i>管理员数:</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold"> <el-tag type="danger">{{roleNum}}</el-tag></div>
        </el-card>
      </el-col>
        <el-col :span="6">
        <el-card>
          <div style="color: #E6A23C"><i class="el-icon-user-solid"></i>普通用户数:</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold"> <el-tag type="warning">{{userNum}}</el-tag></div>
        </el-card>
      </el-col>

      </el-row>

      <el-divider><i class="el-icon-monitor"></i></el-divider>
      <el-row>
        <el-col :span="12">
          <div id="main" style="width: 500px;height: 400px"></div>
        </el-col>
        <el-col :span="12">
          <div id="pei" style="width: 500px;height: 400px"></div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>
<script>
import * as echarts from 'echarts';

export default {
  name: "Home",
data(){
    return{
      sum:'160',
      scholar:'200',
      userNum:'99',
      roleNum:'88'
    }
},
  mounted() {//页面渲染后触发
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '近七天用户注册数量',
        subtext: '折线图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      xAxis: {
        name:'日期',
        type: 'category',
        data: []
      },
      yAxis: {
        name:'人数',
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line'
        }
      ]
    };

    this.request.get("echarts").then(res=>{
      var data2=res.data;
      for (let i = 0; i < data2.length; i++) {
        option.xAxis.data.push(data2[i].time);
        option.series[0].data.push(data2[i].num);
      }

      myChart.setOption(option);
    })

    //饼图
    var peioption = {
      title: {
        text: '角色分布',
        subtext: '管理员-普通用户',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '角色',
          type: 'pie',
          radius: '50%',
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    var peichartDom = document.getElementById('pei');
    var peiChart = echarts.init(peichartDom);
    this.request.get("echarts/role").then(res=>{
      peioption.series[0].data=res.data;
      peiChart.setOption(peioption);
    })

this.request.get("/echarts/number").then(res=>{
  this.sum=res.data.sum;
  this.scholar=res.data.scholar;
  this.roleNum=res.data.roleNum;
  this.userNum=res.data.userNum;
})


  }
}
</script>

<style scoped>
.bg{
  width: 100%;
  height: 100%;
  /*margin: -20px;*/

  /*background-image: url('../assets/1.jpg');*/
  /*background-image: linear-gradient(to bottom right, #e5d9db, #98a5e7);*/
}
</style>